<template>
  <div class="publish-box">
    <van-nav-bar
      title="发布群"
    />
    <van-cell-group class="publish-container">
      <van-field
        v-model="form.groupName"
        label="群名称"
        placeholder="请输入群名称"
      />

      <van-field
        v-model="form.groupSynopsis"
        label="群简介"
        type="textarea"
        placeholder="请输入群简介"
        rows="3"
      />

      <p class="input-location" @click="onClickShowMap">定位：{{ form.location.content }}</p>

      <div class="input-label" @click="onClickLabel">
        <p class="label-title">添加标签：</p>
        <template v-for="(item, index) in form.labelArr">
          <span class="label-item">{{ item }}</span>
        </template>
      </div>

      <van-field
        v-model.number="form.groupMemberCount"
        label="群人员数量"
        placeholder="请输入群人员数量"
        type="number"
      />

      <van-row class="select-status">
        <van-col span="8">发布人身份</van-col>
        <van-col span="12" offset="4" class="select-status-content">
          <select
            v-model="form.selectStatus"
            ref="selectStatus"
            @change="onChange"
            data-form="selectStatus"
          >
            <option value="">请选择</option>
            <option value="我是群主">我是群主</option>
            <option value="我是群成员">我是群成员</option>
            <option value="其他">其他</option>
          </select>
        </van-col>
      </van-row>

      <van-row class="select-status">
        <van-col span="8">进群条件</van-col>
        <van-col span="12" offset="4" class="select-status-content">
          <select
            v-model="form.selectRequire"
            ref="selectRequire"
            @change="onChange"
            data-form="selectRequire"
          >
            <option value="">请选择</option>
            <option value="需要群主审核">需要群主审核</option>
            <option value="不需要审核">不需要审核</option>
          </select>
        </van-col>
      </van-row>

      <van-row class="select-status">
        <van-col span="19">
          <van-field
            v-model.number="form.groupPrice"
            label="群定价"
            placeholder="请输入群定价"
            class="select-status-input"
            type="number"
          />
        </van-col>
        <van-col span="4" offset="1" class="select-status-txt text-right">多多币</van-col>
      </van-row>

      <van-row class="group-radio">
        <van-col span="6">
          <span class="group-radio-title">群类型</span>
          <van-icon class="group-radio-info" name="info-o" @click="onClickInfo" />
        </van-col>
        <van-col span="16" offset="2">
          <van-radio-group v-model="form.radio" class="group-radio-content">
            <van-radio name="交流群" class="group-radio-item">交流群</van-radio>
            <van-radio name="推广群" class="group-radio-item">推广群</van-radio>
          </van-radio-group>
        </van-col>
      </van-row>

      <van-row class="group-upload">
        <van-col span="24">
          <span>群聊天记录截图</span>
          <span class="group-upload-gray">至少上传1张，最多上传5张</span>
        </van-col>
      </van-row>

      <!-- 图片预览 -->
      <div class="upload-container">
        <div class="upload-container-img">
          <div
            class="upload-container-img-item"
            v-for="(item, index) in form.uploadImg"
          >
            <van-icon
              class="upload-container-img-close"
              name="close"
              :data-index="index"
              @click="onDeleteImg"
            />
            <img
              class="upload-img"
              :src="item.content"
              :data-index="index"
              @click="onShowImg"
            >
          </div>
        </div>

        <van-uploader
          class="upload-container-btn"
          :after-read="onRead"
          accept="image/jpg, image/png, image/jpeg"
          :disabled="isUploadDisabled"
          multiple
        >
          <span>上传</span>
        </van-uploader>
      </div>

      <div class="target-population">
        目标人群画像
      </div>

      <van-row class="select-status">
        <van-col span="8">可见范围</van-col>
        <van-col span="12" offset="4" class="select-status-content">
          <select
            v-model="form.selectRange"
            ref="selectRange"
            @change="onChange"
            data-form="selectRange"
          >
            <option value="">请选择</option>
            <option value="全网">全网</option>
            <option value="全省">全省</option>
            <option value="全区县">全区县</option>
            <option value="10公里内">10公里内</option>
            <option value="5公里内">5公里内</option>
          </select>
        </van-col>
      </van-row>

      <van-row class="select-status">
        <van-col span="8">性别</van-col>
        <van-col span="12" offset="4" class="select-status-content">
          <select
            v-model="form.selectSex"
            ref="selectSex"
            @change="onChange"
            data-form="selectSex"
          >
            <option value="">请选择</option>
            <option value="男">男</option>
            <option value="女">女</option>
            <option value="不限">不限</option>
          </select>
        </van-col>
      </van-row>

      <van-row class="select-status">
        <van-col span="8">职业</van-col>
        <van-col span="12" offset="4" class="select-status-content">
          <select
            v-model="form.selectWork"
            ref="selectWork"
            @change="onChange"
            data-form="selectWork"
          >
            <option value="">请选择</option>
            <option value="宝妈">宝妈</option>
            <option value="白领">白领</option>
            <option value="高管">高管</option>
            <option value="白领">白领</option>
          </select>
        </van-col>
      </van-row>

      <van-row class="select-status">
        <van-col span="8">年龄</van-col>
        <van-col span="12" offset="4" class="select-status-content">
          <select
            v-model="form.selectAge"
            ref="selectAge"
            @change="onChange"
            data-form="selectAge"
          >
            <option value="">请选择</option>
            <option value="20~30岁">20~30岁</option>
            <option value="30~40岁">30~40岁</option>
            <option value="40~50岁">40~50岁</option>
            <option value="50岁以上">50岁以上</option>
          </select>
        </van-col>
      </van-row>


      <van-row class="select-status">
        <van-col span="8">
          <van-button size="large" @click="onClickSaveDraft">保存草稿</van-button>
        </van-col>
        <van-col span="15" offset="1">
          <van-button size="large" @click="onClickSubmit">提交</van-button>
        </van-col>
      </van-row>
    </van-cell-group>

    <!-- 标签 label -->
    <van-popup
      v-model="showDialogLabel"
      position="right"
      class="label-container"
    >
      <van-nav-bar title="选择标签">
      </van-nav-bar>
      <van-checkbox-group v-model="form.labelArr">
        <van-cell-group>
          <van-cell
            v-for="(item, index) in data.labelArr"
            :title="item"
            :key="item"
            >
            <van-checkbox :name="item" />
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
      <van-button
        class="label-container-btn"
        type="default"
        size="large"
        @click="onClickLabelConfirm"
        >
        确定
      </van-button>
    </van-popup>

    <!-- 群类型提醒 -->
    <van-dialog
      v-model="groupTypeShow"
      confirm-button-text="关闭"
      @confirm="closeGroupTypeDialog"
      class="group-dialog"
    >
      <div class="group-dialog-content">
        <p>交流群：<span class="group-dialog-title">5代币发布，需要后台审核，发布者自行定价，其他用户付费加群；</span></p>
        <p>推广群：<span class="group-dialog-title">发布者需付费发布，无需审核，自行定价，其他用户付费加群。</span></p>
      </div>
    </van-dialog>
  </div>
</template>

<script>
  import {
    NavBar,
    Cell,
    CellGroup,
    Field,
    Button,
    Row,
    Col,
    Search,
    Tabbar,
    TabbarItem,
    List,
    Icon,
    Popup,
    Dialog,
    ImagePreview,
    RadioGroup,
    Radio,
    Uploader,
    Checkbox,
    CheckboxGroup,
  } from 'vant';
  export default {
    components: {
      [NavBar.name]: NavBar,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Field.name]: Field,
      [Button.name]: Button,
      [Row.name]: Row,
      [Col.name]: Col,
      [Search.name]: Search,
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem,
      [List.name]: List,
      [Icon.name]: Icon,
      [Popup.name]: Popup,
      [Dialog.name]: Dialog,
      [ImagePreview.name]: ImagePreview,
      [RadioGroup.name]: RadioGroup,
      [Radio.name]: Radio,
      [Uploader.name]: Uploader,
      [Checkbox.name]: Checkbox,
      [CheckboxGroup.name]: CheckboxGroup,
    },
    data() {
      return {
        isUploadDisabled: false,
        showDialogLabel: false,
        groupTypeShow: false,
        form: {
          groupName: '',
          groupSynopsis: '',
          groupMemberCount: '',
          labelArr: [],
          location: {
            content: ''
          },
          selectStatus: '',
          selectRequire: '',
          groupPrice: '',
          radio: '交流群',
          imgArr: [],
          selectRange: '',
          selectSex: '',
          selectWork: '',
          selectAge: '',
          uploadImg: [],
        },
        data: {
          labelArr: ['标签1', '标签2','标签3','标签4','标签5','标签6']
        }
      }
    },
    mounted() {
      // 进入该页面 修改父页面的index
      this.$parent.activeIndex = 1;
      if(this.$route.formSendData) {
        this.form = this.$route.formSendData;
      }

      // 地图位置选择后 在vuex中获取修改后的form值
      if(this.$store.state.publishFormSendData.location) {
        this.form = this.$store.state.publishFormSendData;
      }
    },
    methods: {
      onRead(file) {
        let newImgArr = [];
        if(file.length > 0) {
          // 选择多张图片
          let imgLength = file.length + this.form.imgArr.length;
          // 判断图片数量是否大于5个
          if(imgLength > 5) {
            this.$dialog.alert({
              message: '图片个数大于5个，请重新选择'
            });
            return false;
          }

          for(let i = 0, len = file.length; i < len ; i++) {
            this.form.uploadImg.push(file[i]);
            // 将回调uploadImg转成formdata格式
            let formData = new FormData();
            formData.append('file', file[i].file);
            formData.append('fileType', 'record');
            // this.form.imgArr.push(formData);
            newImgArr.push(formData);

            if(this.form.uploadImg.length >= 5) {
              this.isUploadDisabled = true;
            }
          }
        } else {
          this.form.uploadImg.push(file);
          // 将回调uploadImg转成formdata格式
          let formData = new FormData();
          formData.append('file', file.file);
          formData.append('fileType', 'record');
          // this.form.imgArr.push(formData);
          newImgArr.push(formData);

          if(this.form.uploadImg.length >= 5) {
            this.isUploadDisabled = true;
          }
        }

        this.$axios.post(url_g + '/file/uploadFiles',{
          files: newImgArr,
          fileType: 'record'
        }).then((res)=>{
          console.log(res);
          let data = res.data;
          if(data.success) {
            this.form.imgArr = data.data;
          } else {
            this.$dialog.alert({
              message: data.message
            });
          }
        }).catch((e)=>{
          this.isLogin = true;
          this.$dialog.alert({
            message: '您输入的信息有误或网络有问题，请检查重试！'
          });
        });
      },
      onClickLabel() {
        this.showDialogLabel = !this.showDialogLabel;
      },
      onClickLabelConfirm() {
        if(this.form.labelArr.length === 0) {
          this.$dialog.alert({
            message: '请完成选择'
          });
          return false;
        }
        this.showDialogLabel = !this.showDialogLabel;
      },
      onClickSaveDraft() {
        // 保存草稿
      },
      onClickSubmit() {
        console.log(this.form);
        // 提交
        // 检查是否完成选择
        for(let key in this.form) {
          let val = this.form[key];
          if(val === '') {
            this.$dialog.alert({
              message: '请完成选择'
            });
            return false;
          }
        }
        // 达到提交条件

      },
      onChange(val) {
        let select = val.target;
        let selectOption = select.selectedOptions[0];
        let dataName = select.dataset.form;
        this.form[dataName] = selectOption.value;
      },
      onDeleteImg(val) {
        let thisImg = val.target;
        let index = thisImg.dataset.index;

        Dialog.confirm({
          message: '是否删除选中图片？'
        }).then(() => {
          // on confirm
          this.form.uploadImg.splice(index, 1);
          this.form.imgArr.splice(index, 1);
          this.isUploadDisabled = false;
        }).catch(() => {
          // on cancel
        });
      },
      onShowImg(e) {
        let thisImg = e.target;
        let index = parseInt(thisImg.dataset.index);
        let imgContentArr = [];
        this.form.uploadImg.map(function(item, index) {
          imgContentArr.push(item.content);
        });
        ImagePreview(imgContentArr, index);
      },
      onClickInfo() {
        this.groupTypeShow = !this.groupTypeShow;
      },
      closeGroupTypeDialog() {
        this.groupTypeShow = false;
      },
      onClickShowMap() {
        this.$store.state.publishFormSendData = this.form;
        // 跳转地图的时候  将form参数传过去  防止地图页面回来后  数据清空
        this.$router.push({
          name: 'Map',
          params: this.form
        });
      },
    }
  }
</script>

<style scoped="scoped">
.van-hairline--top-bottom::after {
   border: 0;
}
.text-right {
  text-align: right;
}
.publish-container {
  margin-bottom: 50px;
  overflow: hidden;
}
.input-location,
.input-label,
.select-status,
.group-radio {
  font-size: 14px;
  padding: 10px 15px;
}
.select-status-content {
  text-align: right;
}
.select-status-content select {
  left: 210px;
  top: 355px;
  width: 135px;
  height: 26px;
  line-height: 20px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  border: 1px solid rgba(187, 187, 187, 1);
  border-radius: 5px;
  padding-left: 10px;
}
.select-status-input {
  padding: 0;
}
.select-status-txt {
  line-height: 24px;
}
.group-radio-item {
  display: inline-block;
}
.group-radio-content {
  text-align: right;
}
.group-radio {
  line-height: 20px;
}
.group-radio-info {
  line-height: 20px;
  font-size: 20px;
}
.group-radio-title {
  position: relative;
  top: -5px;
}
.group-upload {
  padding: 10px 15px;
  line-height: 20px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
}
.group-upload-gray {
  color: rgba(187, 187, 187, 1);
  margin-left: 15px;
}
.upload-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 15px 10px 5px;
  width: calc(100% - 30px);
  overflow: hidden;
}
.upload-container-img {
  width: 85%;
}
.upload-container-btn {
  width: 15%;
  text-align: center;
}
.upload-container-img-item {
  display: inline-block;
  position: relative;
  width: 61px;
  height: 61px;
  margin-left: 10px;
  margin-bottom: 10px;
}
.upload-img {
  width: 61px;
  height: 61px;
}
.upload-container-img-close {
  position: absolute;
  top: 0;
  left: 0;
}
.target-population {
  width: 100%;
  text-align: center;
  height: 23px;
  line-height: 20px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  padding-top: 10px;
  border-top: 1px solid #ccc;
}
.label-container {
  width: 100%;
  height: 100%;
}
.label-title {
  line-height: 20px;
  margin-bottom: 20px;
}
.input-label {
  height: auto;
}
.label-item {
  display: inline-block;
  padding: 10px;
  background-color: #ccc;
  border-radius: 5px;
  margin: 0 10px 10px 0;
  color: #fff;
}
.label-container-btn {
  position: absolute;
  bottom: 0;
  left: 0;
}
.group-dialog {
  width: 280px;
}
.group-dialog-content {
  padding: 30px 30px 10px 30px;
}
.group-dialog-title {
  line-height: 24px;
  color: rgba(0, 0, 0, 0.54);
  font-size: 16px;
  text-align: left;
}
</style>